<template>
  <div>
    <a-table :columns="userList.tableColumns" :data-source="userList.tableData" :pagination="false">
      <template #actionRender="{ record }">
       <a-button type="primary" ghost  @click="userAction.opendEditUserVisible(record)">编辑</a-button>
        <a-button type="primary" ghost danger  @click="userAction.deleteUser(record)">删除</a-button>
      </template>
    </a-table>

    <pagination :total="page.total" @updatePageSize="page.updatePageSize" @updateCurrentPage="page.updateCurrentPage"></pagination>
    

    <!-- 编辑用户对话框 -->
    <a-modal v-model:visible="userAction.editUserVisible" title="编辑用户" @ok="userAction.editUserHandleOk">
        <p>用户名:</p>
        <a-input v-model:value="userAction.username" placeholder="user name" />
         <p>密码(不填写则不修改):</p>
        <a-input-password  v-model:value="userAction.password" placeholder="user pasword" />
        <p>角色列表:</p>   
        <a-select
    v-model:value="userAction.role_id"
    mode="multiple"
    show-search
    placeholder="Select a person"
    style="width: 200px"
    :options="roleData"
  >
  </a-select>
        <p>状态:</p>
        <a-switch checked-children="开" un-checked-children="关" v-model:checked="userAction.status" />
    
    </a-modal>
  
  </div>
</template>

<script>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import pagination from "@/components/pagination/pagination.vue";

 
export default {
  components: { pagination },
  name: "",
  props: {},
  setup(props) {
    var { proxy } = getCurrentInstance();
    var store = useStore();
    var page = reactive({
      pageSize: 20,
      current: 1,
      total: 0,
      updatePageSize: ({ pageSize, current }) => {
        page.pageSize = pageSize;
        page.current = current;
        userList.getTableData()
      },
      updateCurrentPage: ({ pageSize, current }) => {
        page.pageSize = pageSize;
        page.current = current;
        userList.getTableData()
      },
    });
    
    //获取所有角色数据
    var roleData=ref()
    function getRoleData(){
            proxy.$request({
                url:'/role_admin/list',
                method:'get',
                params:{
                    page:1,
                    limit:10000
                }
            }).then(res=>{
               res=res.data.data.list
               res.forEach(el=>{
                   el.value=el.role_id
                   el.label=el.role_name
               })
               roleData.value=res
            //    console.log(roleData)
            })
    }
    getRoleData()

    //用户列表相关操作与数据
    var userList = reactive({
      tableData: [],
      tableColumns: [],
      handleTableData:(userData)=>{
          if(!userData.length>0) return
          userList.tableData=[]
          userList.tableColumns=[]
          Object.keys(userData[0]).forEach((key)=>{
              var obj={}
              obj.title=key
              obj.key=key
              obj.dataIndex=key
              userList.tableColumns.push(obj)
          })
          userList.tableColumns.push({
              key:'action',
              title:'操作',
              slots:{
                customRender:'actionRender'
              }
          })
         userList.tableData= userData.map((el,index)=>{
              el.key=index
              return el
          })
      },
      getTableData: () => {
        proxy.$request({
          url: "/userAdmin/list",
          method: "get",
          params: {
              page:page.current,
              limit:page.pageSize
          }
        }).then(res=>{
            page.total=res.data.data.count
            userList.handleTableData(res.data.data.list)
        })
      },
    });

    userList.getTableData() //获取用户列表数据
   
   
   //用户列表操作
    var userAction=reactive({
        userId:'',
        username:'',
        role_id:[],
        password:'',
        status:true,
        editUserVisible:false,
        init:()=>{
           
            userAction.userId='',userAction.username='',userAction.role_id=[],userAction.password='',userAction.status=true
        },
        check:()=>{
            if(!userAction.userId|| !userAction.username){
                return false
            }
            return true
        },
        opendEditUserVisible:(user)=>{
            console.log(user)
            userAction.init()
            userAction.userId=user.id
            userAction.username=user.username
            userAction.status=user.status==1?true:false
            if(user.role_id){
                 userAction.role_id=user.role_id.split(',')
                userAction.role_id= userAction.role_id.map(el=>{                   
                   return parseInt(el)                   
               })
                     
            }
            userAction.editUserVisible=true
        },
        editUserHandleOk:()=>{ 
                if(!userAction.check()){
                    proxy.$message.error('用户名必填')
                    return
                }
            var data={
                    id:userAction.userId,
                    username:userAction.username,
                    role_id:userAction.role_id.join(',') || '',
                    status:userAction.status?1:0
                }    
                if(userAction.password){
                    data.password=userAction.password
                }
            proxy.$request({
                url:"/userAdmin/edit",
                method:'post',
                data
            }).then(res=>{
                if(res.data.code==400){
                    proxy.$message.error(res.data.data)
                }
                userList.getTableData()
                userAction.editUserVisible=false
            })
        },
        deleteUser:(user)=>{
            proxy.$request({
                url:"/userAdmin/del",
                method:'post',
                data:{
                    id:user.id
                }
            }).then(res=>{
                if(res.data.code==400){
                    proxy.$message.error(res.data.data)
                }
                userList.getTableData()
                userAction.editUserVisible=false
            })

        }   
    })

    return {
     userList,
     page,
     userAction,
     roleData
    };
  },
};
</script>

<style lang="scss" scoped>
</style>